<template>
  <div class='eletable'>
    <el-table border :data="tableData" style="width: 100%;" :max-height="maxHeight?maxHeight:maxheight" :row-style="{height:'60px',fontSize:'14px',color:'#30383e'}" :header-cell-style="thstyle" :cell-style="cellStyle" @cell-click='cellclick'>
      <el-table-column v-for='(item,index) in list' :key='index' :prop="item.key" :label="item.title" show-overflow-tooltip='false' align='center' :sortable='item.key=="date" || item.key=="datetwo"' min-width="130">
      </el-table-column>
    </el-table>
    <textarea id='copyy' style='position: abslute;opacity: 0;'></textarea>
  </div>
</template>

<script>
import $ from 'jquery'
export default {
  methods: {
    thstyle({ row, column, rowIndex, columnIndex }) {
      return {
        background: "rgb(37, 40, 52)",
        fontSize: "14px",
        color: "white",
        fontWeight: 400,
        height: "60px"
      };
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === this.cloumn) {
        //指定列号
        if (this.cloumn == 19) {
          if (row.tdl == "待支付" || row.tdx == "待支付") {
            return { color: "#5286ff", cursor: "pointer" };
          } else {
            return { color: "#ccc !important" };
          }
        } else {
          return { color: "#5286ff", cursor: "pointer" };
        }
      }
    },
    cellclick(row, column, cell, event) {
      if (column.label == "收款卡号") {
        let copyy = document.querySelector("#copyy");
        copyy.value = event.target.innerText;
        copyy.select();
        document.execCommand("copy");
      }
      if (this.cloumn === 8) {
        if (column.label == "操作") {
          this.$parent.popflag = true;
          this.$emit("pop", row);
        }
      }
      if (this.cloumn === 19) {
        if (column.label == "操作") {
          if (row.tdx == "待支付") {
            this.$router.push({ name: "pickupPay", params: { id: row.id } });
          }
        }
      }
      // if (this.cloumn == 12) {
      //   if (column.label == "操作") {
      //     if (row.tdl == "待支付") {
      //       this.$router.push({
      //         name: "jiancangpayment",
      //         params: { id: row.id }
      //       });
      //     } else {
      //     }
      //   }
      // }
    }
  },

  mounted() {
    let that = this;
   this.cloumn!==8? setTimeout(() => {
      $(".capital .capital_table").height(
        $(".capital").height() - $(".top").height() - 92
      );
      that.maxheight =
        document.querySelector(".capital_table").offsetHeight + "";
      window.onresize = function() {
        setTimeout(() => {
          $(".capital .capital_table").height(
            $(".capital").height() - $(".top").height() - 92
          );
          that.maxheight =
            document.querySelector(".capital_table").offsetHeight + "";
        }, 200);
      };
    }, 200):''
  },
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      maxheight: "650"
    };
  },
  props: ["list", "tableData", "maxHeight", "cloumn"]
};
</script>

<style lang="less" scoped>
</style>
